import { Input, Select, Table } from "antd";
import React, { useState } from "react";
import "./style/ServiceRecord/index.scss";

interface Guest {
  id: number;
  name: string;
  ip: string;
  service: string;
  startTime: string;
  endTime: string;
}

const generateMockGuests = (count: number): Guest[] => {
  const guests: Guest[] = [];
  for (let i = 1; i <= count; i++) {
    guests.push({
      id: i,
      name: `Guest ${i}`,
      ip: `192.168.${Math.floor(Math.random() * 256)}.${Math.floor(
        Math.random() * 256
      )}`,
      service: `Service ${Math.floor(Math.random() * 10) + 1}`,
      startTime: new Date(
        2023,
        4,
        Math.floor(Math.random() * 31) + 1,
        Math.floor(Math.random() * 24),
        Math.floor(Math.random() * 60)
      ).toLocaleString(),
      endTime: new Date(
        2023,
        4,
        Math.floor(Math.random() * 31) + 1,
        Math.floor(Math.random() * 24),
        Math.floor(Math.random() * 60)
      ).toLocaleString(),
    });
  }
  return guests;
};

const { Option } = Select;

const columns: any = [
  {
    title: "ID",
    dataIndex: "id",
    align: "center",
  },
  {
    title: "游客名称",
    dataIndex: "name",
    align: "center",
  },
  {
    title: "IP",
    dataIndex: "ip",
    align: "center",
  },
  {
    title: "接待客服",
    dataIndex: "service",
    align: "center",
  },
  {
    title: "开始时间",
    dataIndex: "startTime",
    align: "center",
  },
  {
    title: "结束时间",
    dataIndex: "endTime",
    align: "center",
  },
];

const TableDemo: React.FC = () => {
  const [pageSize, setPageSize] = useState<number>(5);
  const [currentPage, setCurrentPage] = useState<number>(1);
  const [guests, setGuests] = useState<Guest[]>(generateMockGuests(100));
  const [searchText, setSearchText] = useState<string>("");
  const [searchType, setSearchType] = useState<keyof Guest>("name");

  const handlePageSizeChange = (current: number, size: number) => {
    setPageSize(size);
    setCurrentPage(1); // 如果改变了每页显示条数，则返回第一页
  };

  const handlePageChange = (page: number) => {
    setCurrentPage(page);
  };

  const handleSearchInputChange = (
    event: React.ChangeEvent<HTMLInputElement>
  ) => {
    setSearchText(event.target.value.trim());
  };

  const handleSearchTypeChange = (value: string) => {
    setSearchType(value as keyof Guest);
  };

  const filteredGuests = guests.filter((guest) => {
    const propValue = String(guest[searchType]).toLowerCase();
    const targetValue = searchText.toLowerCase();
    return propValue.includes(targetValue);
  });

  const startIndex = (currentPage - 1) * pageSize;
  const endIndex = startIndex + pageSize;

  return (
    <div className="serviceTables">
      <div className="table-search">
        <p>搜索信息</p>
        <div className="search-wrap">
          <select
            defaultValue="name"
            // onChange={handleSearchTypeChange}
          >
            <option value="name">游客名称</option>
            <option value="ip">IP 地址</option>
            <option value="service">接待客服</option>
          </select>
          <input
            placeholder="   请输入要搜索的内容"
            // allowClear
            value={searchText}
            onChange={handleSearchInputChange}
            style={{ width: "300px", marginRight: "20px" }}
          />
          <button>搜索</button>
        </div>
      </div>
      <Table
        className="Tables"
        style={{ textAlign: "center", height: "60vh" }}
        columns={columns}
        dataSource={filteredGuests
          .slice(startIndex, endIndex)
          .map((guest) => ({ ...guest, key: guest.id }))}
        pagination={{
          showSizeChanger: true,
          onShowSizeChange: handlePageSizeChange,
          pageSizeOptions: ["5", "10", "20", "50"],
          current: currentPage,
          total: filteredGuests.length,
          showQuickJumper: true,
          showTotal: (total, range) =>
            `每页显示 ${pageSize} 条，共 ${total} 条`,
          onChange: handlePageChange, // 添加分页事件处理函数
        }}
      />
    </div>
  );
};

export default TableDemo;
